<template>
  <div class="account">
    <div class="container">
      <div class="title">
        <h3>{{title}}</h3>
      </div>
      <div class="content">
        <el-tabs v-model="activeName" @tab-click="handleClick">
<!-- 通过学校信息找回 -->
           <el-tab-pane label="通过学校信息找回" name="school">
            <div class="schoolBox box">
              <school :isRuleFalse="studentFalse" ref="child" />
            </div>
           </el-tab-pane>
<!-- 通过线上付款订单编号找回  -->
           <el-tab-pane label="通过线上付款订单编号找回" name="order">
            <div class="orderBox box">
              <order :isRuleFalse="orderFalse" ref="child" />
            </div>
           </el-tab-pane>
<!-- 通过激活码找回 -->
           <el-tab-pane label="通过激活码找回" name="key">
            <div class="keyBox box">
              <key :isRuleFalse="keyFalse" ref="child" />
            </div>
           </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
    import school from './school/school.vue'
    import order from './order/order.vue'
    import key from './key/key.vue'
    export default {
        name: "account",
        data() {
            return {
                title: '找回账号',
                activeName: 'school',
                studentFalse: false,
                orderFalse: false,
                keyFalse: false,
            }
        },
        created() {

        },
        components: {
            school,
            order,
            key
        },
        methods: {
            // // 切换tabs时清空验证规则
            // clearRules() {
            //     this.studentFalse = false;
            //     this.orderFalse = false;
            //     this.keyFalse = false;
            // },
            handleClick(tab, event) {
                // this.$refs.child.clearRules();
                this.$refs.child.$emit('childMethod1')
            },
        }
    }
</script>

<style scoped lang="scss">
  @import '../../../../styles/common.scss';
  .account{
    .container{
      .title{
        text-align: center;
        padding: 40px 0;
        h3{
          font-size: 1.5rem;
          font-weight: normal;
        }
      }
      .content{
        padding: 0 30px;
      }
    }
  }
</style>